<template>
  <el-card shadow="never" class="CommonApp-box">
    <div slot="header" class="portal-common-title">
      <span>{{ title }}</span>
    </div>
    <div class="CommonApp-box-body">
      <div
        class="item com-hover"
        @click="goto(item)"
        v-for="(item, i) in menuList"
        :key="i"
      >
        <!-- <i :class="item.icon" :style="{ color: item.iconBackgroundColor || '#1890FF' }"></i> -->
        <img class="itemImg" :src="item.img" alt="" />
        <p class="name">{{ item.name }}</p>

        <p class="details">{{ item.details }}</p>
      </div>
    </div>
  </el-card>
</template>
<script>
// import { mapState } from 'vuex'
// // import AppLink from './Link'
// import { getToken } from '@/utils/auth'
// import console from 'console'
export default {
  // components: { AppLink },
  props: {
    title: { type: String, default: "" },
    list: { type: Array, default: () => [] },
  },
  data() {
    return {
      menuList: [],
      collectMenuListCopy: [],
      // colorList: ['#ff850f', "#7b6ff1", "#27c707", "#3883fe", "#db1a12", "#3073f5", "#fa8e23", "#28a5ba", '#ff850f', "#7b6ff1"]
    };
  },
  computed: {
    // ...mapState({
    //   collectMenuList: state => state.collectMenu.collectMenuList,
    // }),
  },
  created() {
    this.collectMenuListCopy = this.collectMenuList;
    this.getList();
  },
  watch: {
    list: {
      handler(val) {
        this.getList();
      },
      deep: true,
    },
  },
  methods: {
    goto(item) {
      // console.log('item', item)
      window.open(item.urlAddress);
    },
    getList() {
      // console.log(this.collectMenuListCopy)
      // let list = this.list.filter(o => o.id)
      // list = list.map((o, i) => {
      //   let path = '/' + o.urlAddress
      //   // 大屏
      //   if (o.type == 6) {
      //     let propertyJson = o.propertyJson ? JSON.parse(o.propertyJson) : null,
      //       moduleId = '';
      //     if (propertyJson) moduleId = propertyJson.moduleId || ''
      //     path = `${this.define.dataV}/view/${moduleId}?token=${getToken()}`
      //   }
      //   if (o.type == 7) {
      //     if (o.linkTarget === "_self") {
      //       path = '/' + o.enCode
      //     } else {
      //       path = o.urlAddress.replace(/\${dataV}/g, this.define.dataV).replace(/\${jnpfToken}/g, getToken())
      //     }
      //   }
      //   return {
      //     ...o,
      //     path
      //   }
      // })

      // if (this.list.length == 0) {
      //   this.menuList = [{ name: '学院', urlAddress: '', details: '集团内部培训平台，助力自我成长', img: require('../../../assets/images/commonApp/school.png') },
      //   { name: '固定资产', urlAddress: '', details: '资产的入库、变更、盘点、二维码标签打印等', img: require('../../../assets/images/commonApp/zc.png') },
      //   { name: '企业邮箱', urlAddress: '', details: '业务流程提报与审批', img: require('../../../assets/images/commonApp/email.png') },
      //   { name: '控费管理', urlAddress: '', details: '费用管理', img: require('../../../assets/images/commonApp/money.png') }]
      //   this.menuList.forEach((item, index) => {
      //     item.iconBackgroundColor = this.colorList[index]
      //   })
      // } else {
      //   this.menuList = [...this.list]
      // }

      this.menuList = [...this.list];

      // this.menuList = [{ name: '学院', urlAddress: '', details: '集团内部培训平台，助力自我成长', img: require('../../../assets/images/commonApp/school.png') },
      // { name: '固定资产', urlAddress: '', details: '资产的入库、变更、盘点、二维码标签打印等', img: require('../../../assets/images/commonApp/zc.png') },
      // { name: '企业邮箱', urlAddress: '', details: '业务流程提报与审批', img: require('../../../assets/images/commonApp/email.png') },
      // { name: '控费管理', urlAddress: '', details: '费用管理', img: require('../../../assets/images/commonApp/money.png') }]
      // this.menuList.forEach((item, index) => {
      //   item.iconBackgroundColor = this.colorList[index]
      // })
    },
  },
};
</script>
<style lang="scss" scoped>
.CommonApp-box {
  .itemImg {
    width: 45px;
    height: 45px;
    float: left;
  }

  >>> .el-card__body {
    width: 100%;
    height: calc(100% - 55px);
  }

  .CommonApp-box-body {
    padding: 0 30px;
    height: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: center;

    .item {
      cursor: pointer;
      display: block;
      text-align: center;
      width: 163px;
      margin-left: 40px;
      height: 99px;
      overflow: hidden;

      i {
        display: inline-block;
        height: 40px;
        font-size: 40px;
        margin-bottom: 10px;
      }

      .name {
        font-size: 20px;
        font-weight: 500;
        float: left;
        width: 118px;
        line-height: 45px;
        text-align: center;
      }

      .details {
        font-size: 14px;
        font-weight: 400;
        float: left;
        line-height: 22px;
        margin-top: 10px;
        text-align: left;
        color: rgba(0, 0, 0, 0.45);
      }
    }
  }
}
</style>
